<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      :show-indicators="true"
      :touchable="true"
    >
      <van-swipe-item v-for="data in banner" :key="data.id">
        <img :src="data.url" class="swiper-img" />
      </van-swipe-item>
    </van-swipe>
    <!-- 菜单栏 -->
    <div class="tabbox">
      <img
        :src="data.picUrl"
        v-for="data in tabimg"
        :key="data.id"
        class="tabimg"
      />
    </div>
    <!-- 海报 -->
    <div class="imgbox">
      <div class="imgbox-left">
        <img
          class="img1"
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/16305100fd7913dd727e8906b97e8998.png?f=webp&w=537&h=762&bg=DDE2E6"
        />
      </div>
      <div class="imgbox-right">
        <img
          class="img1"
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f8a28a90c3c449ba422a10e40085d2e9.png?f=webp&w=537&h=378&bg=DBDEEF"
        />
        <img
          class="img1"
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/200a6f45d1ccbf7d8fd92f4bbe2842d4.jpeg?f=webp&w=537&h=378&bg=F3E7E7"
        />
      </div>
    </div>
    <!-- 手机 -->
    <div>
      <img
        class="poster"
        v-lazy="
          'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/051b383d45f1fad5aa3bfae8851af7c4.png?f=webp&w=1080&h=660&bg=FFFFFF'
        "
      />
      <div class="phonebox">
        <div class="phoneitem" v-for="data in phonelist" :key="data.id">
          <img class="phoneimg" v-lazy="`${data.Pic}`" />
          <p class="phonep phonep1">{{ data.name }}</p>
          <p class="phonep phonep2">{{ data.detail }}</p>
          <p class="phonep phonep3">
            <span class="moneyicon">￥</span>{{ data.oldprice
            }}<span class="moneytext">起</span>
          </p>
          <p class="phonep phonep4">
            <span class="phonep-span">立即购买</span>
          </p>
        </div>
      </div>
      <div class="more">更多小米手机产品 ></div>
    </div>
    <!-- 电视 -->
    <div>
      <img
        class="poster"
        v-lazy="
          'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/396893c2d8416dc791cc3cd7f8a65bdf.jpeg?f=webp&w=1080&h=660&bg=FFFFFF'
        "
      />
      <div class="more">更多小米电视产品 ></div>
    </div>
    <!-- 电脑 -->
    <div>
      <img
        class="poster"
        v-lazy="
          'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/393a90da633889384d35acb7c44eeb17.jpg?f=webp&w=1080&h=660&bg=FFFFFF'
        "
      />
      <div class="phonebox">
        <div class="phoneitem" v-for="data in computerlist" :key="data.id">
          <img class="phoneimg" v-lazy="`${data.Pic}`" />
          <p class="phonep phonep1">{{ data.name }}</p>
          <p class="phonep phonep2">{{ data.detail }}</p>
          <p class="phonep phonep3">
            <span class="moneyicon">￥</span>{{ data.oldprice
            }}<span class="moneytext">起</span>
          </p>
          <p class="phonep phonep4">
            <span class="phonep-span">立即购买</span>
          </p>
        </div>
      </div>
      <div class="more">更多小米笔记本产品 ></div>
    </div>
    <!-- 米家智能 -->
    <div>
      <img
        class="poster"
        v-lazy="
          'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5442b538b27d4664b61b740e8934753b.jpg?f=webp&w=1080&h=660&bg=FFFFFF'
        "
      />
      <div class="more">更多米家家电产品 ></div>
      <div class="more">更多米家智能产品 ></div>
    </div>
    <!-- 底部图片 -->
    <div class="btmimgbox">
      <img
        class="btmimg"
        v-lazy="
          'https://i8.mifile.cn/v1/a1/46c44f3e-479d-a999-dd2d-98fb39b51e17.webp?w=537&h=720&bg=C0A491'
        "
      />
      <img
        class="btmimg"
        v-lazy="
          'https://i8.mifile.cn/v1/a1/b79cb907-3ae4-2a35-6756-b243b386a95a.webp?w=537&h=720&bg=E8CFCB'
        "
      />
      <img
        class="btmimg"
        v-lazy="
          'https://i8.mifile.cn/v1/a1/b883172b-5aa3-7855-678f-c615109ee0a7.webp?w=537&h=720&bg=878F9B'
        "
      />
      <img
        class="btmimg"
        v-lazy="
          'https://i8.mifile.cn/v1/a1/8cfcd654-4af5-9ae6-c6cc-1ba9d28be8e8.webp?w=537&h=720&bg=9BB5C4'
        "
      />
      <img
        class="btmimg"
        v-lazy="
          'https://i8.mifile.cn/v1/a1/52866372-7fe5-76c2-29a0-9ae32d07b8ff.webp?w=537&h=720&bg=D9D8C3'
        "
      />
      <img
        class="btmimg"
        v-lazy="
          'https://i8.mifile.cn/v1/a1/ad91499a-59ab-adc3-8fd5-98aefc1c43b4.webp?w=537&h=720&bg=B5C5BE'
        "
      />
    </div>
    <!-- 了解小米 -->
    <div>
      <img
        class="poster"
        v-lazy="
          'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4c4a11536a720ee0f1b516e53e4d868.jpg?f=webp&w=1080&h=420&bg=873FFA'
        "
      />
      <a href="https://cdn.cnbj0.fds.api.mi-img.com/b2c-data-mishop/63ba4b56717e.html?spmref=MiShop_M.cms_26.3265907.1&scmref=cms.0.0.0.0.0.0.0">
        <img
        class="poster"
        v-lazy="
          'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/bbb5bac8089d890338b5bf8ff742cbbc.png'
        "
      />
      </a>
    </div>
  </div>
</template>

<script>
import backtop from '@/components/backtop/BackTop'

export default {
  components: {
    backtop
  },
  data () {
    return {
      banner: [],
      tabimg: [],
      phonelist: [],
      computerlist: [],
      scrollTop: 0
    }
  },
  mounted () {
    this.getBanner()
    this.getTabimg()
    this.getPhonelist()
    this.getComputerlist()
  },
  methods: {
    getBanner () {
      this.request.get('/ReBanner').then((res) => {
        this.banner = res.data
      })
    },
    getTabimg () {
      this.request.get('/ReTabImg').then((res) => {
        this.tabimg = res.data
      })
    },
    getPhonelist () {
      this.request.get('/Phone?hot=1').then((res) => {
        this.phonelist = res.data
      })
    },
    getComputerlist () {
      this.request.get('/Computer?hot=1').then((res) => {
        this.computerlist = res.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
@Highcollapse: {
  content: "";
  clear: both;
  display: block;
};
@poster: {
  width: 100%;
  display: block;
};
.poster {
  width: 100%;
  display: block;
}
.swiper-img {
  width: 100%;
  display: block;
}
.more {
  text-align: center;
  width: 100%;
  line-height: 3.25rem;
  color: rgba(0, 0, 0, 0.6);
  border-bottom: 0.625rem solid #f5f5f5;
}
.tabbox {
  .tabimg {
    width: 4.6875rem;
    height: 4.9375rem;
    display: block;
    float: left;
  }
}
.tabbox::after {
  @Highcollapse();
}
.imgbox {
  padding: 0.625rem 0;
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-between;
  .imgbox-left {
    width: 11.625rem;
    .img1 {
      width: 11.625rem;
      display: block;
    }
  }
  .imgbox-right {
    width: 11.625rem;
    .img1 {
      width: 11.625rem;
      display: block;
    }
    .img1:nth-child(1) {
      margin-bottom: 2px;
    }
  }
}
.phonebox {
  padding: 0.1875rem 0.375rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .phoneitem {
    width: 11.125rem;
    margin-bottom: 0.3125rem;
    .phoneimg {
      width: 100%;
      display: block;
    }
    .phonep {
      text-align: center;
    }
    .phonep1 {
      font-size: 1rem;
      color: rgba(0, 0, 0, 0.87);
      margin: 0.625rem 0 0.3125rem;
    }
    .phonep2 {
      font-size: 0.75rem;
      color: rgba(0, 0, 0, 0.54);
      margin-bottom: 0.3125rem;
      width: 9.375rem;
      margin: 0 auto;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .phonep3 {
      font-size: 1rem;
      color: #ea625b;
      .moneytext {
        font-size: 0.75rem;
      }
      .moneyicon {
        font-size: 0.75rem;
      }
    }
    .phonep4 {
      font-size: 0.875rem;
      margin: 0.3125rem 0;
      .phonep-span {
        padding: 0.3125rem 1.25rem;
        background: #ea625b;
        color: #fff;
        display: inline-block;
      }
    }
  }
}
.btmimgbox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .btmimg {
    width: 11.625rem;
    display: block;
    margin-bottom: 0.1875rem;
  }
}
</style>
